<template>
	<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
		<view class="pop_wrap">
            <div class="pop_title">套餐筛选</div>
            <div class="top_line"></div>
            <view class="setmeal_list">
                <view class="list_item" :class="{'item_active': index == cureentInd}" v-for="(item, index) in setmealList" :key="index">{{ item }}</view>
            </view>
		</view>
	</u-popup>
</template>
<script>
  export default {
    data() {
      return {
        show: false,
        cureentInd: 3,
        setmealList: ["全部", "财会经济", "财会经济", "财会经济", "财会经济", "财会经济", "财会经济"]
      }
    },
    methods: {
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
        // console.log('close');
      }
    }
  }
</script>

<style lang="scss" scoped>
.pop_wrap {
    padding: 30rpx 0;
    .pop_title {
        padding-left: 18rpx;
        padding-bottom: 30rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            width: 6rpx;
            height: 26rpx;
            background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
            border-radius: 0rpx;
        }
    }
    .top_line {
        width: 100%;
        height: 2rpx;
        background: #E5E5E5;
        border-radius: 0rpx;
    }
    .setmeal_list {
        padding: 0 18rpx;
        .list_item {
            padding: 48rpx 28rpx 0;
            font-weight: bold;
            font-size: 28rpx;
        }
        .item_active {
            background-color: #CFE4FF;
            color: #1552FB;
            border-radius: 8rpx;
            padding: 16rpx 28rpx;
            margin: 32rpx 0 0;
        }
    }
}
</style>